<template>
  <view class="page-main">
    <view class="background-image">
			<view class="device-status_bar">
				<!-- 这里是手机本身的状态栏 -->
			</view>
      <view class="custom-nav-bar">
        <view class="left-button" @click="toSwitchTab">
        </view>

      </view>
      <view class="title-wrapper">
        <view class="title1">HELP CENTRE</view>
        <view class="title2">帮助中心</view>
      </view>
    </view>
    <view class="body-main">
      <view class="title">常见问题</view>
      <view class="questions-wrapper">
        <view class="question-item" style="" v-for="question in questions"
              @click="toDetail(question)"
              :key="question.id">
          {{question.title}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import zNavBar from "@/components/zhouWei-navBar"
  import {uniSwitchTab} from "../util/funcs"
  import {uniNavigate} from "../util/misc"
  import {uniSetStorageSync} from "../util/funcs"
  import {ROUTER_OBJ} from "../util/misc"

  export default {
    components: {
      zNavBar
    },
    methods: {
      toSwitchTab() {
        uniSwitchTab('/personalCenter')
      },
      toDetail(question) {
        uniSetStorageSync(ROUTER_OBJ, question)
        uniNavigate('/textDetails')
      },
      
    },
    data() {
      return {
        questions: [
          {
            id: 1,
            content: '如何修改手机号'
          },
        ]
      };
    },
    onShow() {
      uni.request({
        url:`${this.$http}/api/merchant/business_help`,
        method:"POST",
        header:{
          Authorization: 'Bearer ' + this.$store.state.token
        },
        complete: (res) => {
          // console.log('res', res)
          if (res.data.code === 200) {
            this.questions = res.data.data
          }
          
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/styles/global";

  .background-image {
    @include body-background-image;
    height: 340rpx;
    background-image: url("../static/images/helpCenter/bg_img@3x.png");

    .custom-nav-bar {
      .left-button {
        background-image: url("../static/images/back-icon@3x.png");
      }
    }

    .title-wrapper {
      @include center;
      /*align-items: flex-start;*/
      /*padding-top: 12rpx;*/
      flex-direction: column;

      .title1 {
        height: 50rpx;
        font-family: Helvetica;
        font-size: 36rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 50rpx;
        letter-spacing: 0rpx;
        color: #ffffff;
        margin-bottom: 10rpx;
      }

      .title2 {
        
        width: 112rpx;
        height: 50rpx;
        font-family: PingFangSC-Medium;
        font-size: 28rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 50rpx;
        letter-spacing: 0rpx;
        color: #ffffff;
      }
    }
  }

  .body-main {
    padding: 15px;
    margin-top: -35rpx;
    border-radius: 35rpx;
    background-color: white;
    height: 100vw;

    .title {
      margin-bottom: 14px;
      width: 64px;
      height: 20px;
      font-size: 16px;
      line-height: 20px;
      letter-spacing: 0px;
      color: #06121f;
    }

    .questions-wrapper {
      display: flex;
      flex-wrap: wrap;
  
      .question-item {
        background-color: #ebedf0;
        border-radius: 5px;
        color: #06121f;
        font-size: 14px;
        margin: 5px;
        padding: 8px;
      }
    }
  }
</style>
